<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>月顾客返品统计表</title>
<jsp:include page="./common.jsp"></jsp:include>
<style type="text/css">
 div {
 	float: left;
 }
</style>
<script type="text/javascript">
$(function () {
var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '返品率'
    },
    xAxis: {
    	 categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                      '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
        title: {
            text: '返品率'
        },
        labels: {
            formatter: function () {
                return this.value + '%';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '返品率',
        marker: {
            symbol: 'square'
        },
        data: [0.01, 0.03, 0.15, 0.2, 0.18, 0.08, 0.14,0.1, 0.06,0.15, 0.09, 0.04]
    }]
});
var chart2 = Highcharts.chart('container2', {
    chart: {
    	plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: '不良项目'
    },
    tooltip: {
        headerFormat: '{series.name}<br>',
        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: '不良项目占比',
        data: [
            ['未成形',   45.0],
            ['毛边',       26.8],
            {
                name: '冷料',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['亮印',    8.5],
            ['其他',   0.7]
        ]
    }]
});
});
</script>
</head>
<body>
        <table id="tb_departments" class="table table-bordered">
        	<tr  align="center">
        		<td rowspan="2">顺次</td>
        		<td rowspan="2">顾客</td>
        		<td rowspan="2">区分</td>
        		<td rowspan="2">供货数量</td>
        		<td rowspan="2">不良数量</td>
        		<td rowspan="2">不良比率</td>
        		<td rowspan="2">目标</td>
        		<td rowspan="2">达成率</td>
        		<td colspan="10">不良项目</td>
        		<td rowspan="2">合计</td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	<tr>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        		<td></td>
        	</tr>
        	
        </table>
        <div style="min-width:100%;height:400px">
	        <div id="container" style="min-width:60%;height:400px"></div>
	        <div id="container2" style="min-width:40%;height:400px"></div>
        </div>
        
</body>
</html>